<template>
  <div class="order-dimension">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state">
      <el-icon class="is-loading" :size="40">
        <Loading />
      </el-icon>
      <p>正在加载订单数据...</p>
    </div>
    
    <!-- 订单核心指标 -->
    <div v-else class="kpi-group plan-metrics-group">
      <div class="kpi-group-header">
        <div class="header-left">
          <el-icon class="group-icon"><Tickets /></el-icon>
          <span class="group-title">订单核心指标</span>
          <el-tag type="info" size="small" class="metric-count">实时数据</el-tag>
        </div>
      </div>
      <div class="kpi-group-content">
        <el-row :gutter="16" class="metric-row">
          <el-col :span="6">
            <div class="kpi-card enhanced order-metric" @click="showMetricDetail('orderCount')">
              <div class="kpi-card-inner">
                <div class="metric-icon-wrapper orders">
                  <el-icon><Tickets /></el-icon>
                </div>
                <div class="metric-content">
                  <div class="metric-name">订单总数</div>
                  <div class="metric-value-wrapper">
                    <transition name="number-fade" mode="out-in">
                      <span :key="orderData?.planOrderCount || 0" class="metric-main-value">
                        {{ orderData?.planOrderCount || 0 }}
                      </span>
                    </transition>
                    <span class="metric-unit">个</span>
                  </div>
                  <div class="metric-status">
                    <span class="status-label">已完成</span>
                    <el-progress :percentage="65" :stroke-width="4" :show-text="false" color="#67C23A" />
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="kpi-card enhanced order-metric" @click="showMetricDetail('avgOrderTime')">
              <div class="kpi-card-inner">
                <div class="metric-icon-wrapper hours">
                  <el-icon><Timer /></el-icon>
                </div>
                <div class="metric-content">
                  <div class="metric-name">平均订单工时</div>
                  <div class="metric-value-wrapper">
                    <transition name="number-fade" mode="out-in">
                      <span :key="orderData?.orderAvgHours || 0" class="metric-main-value">
                        {{ orderData?.orderAvgHours || 0 }}
                      </span>
                    </transition>
                    <span class="metric-unit">小时</span>
                  </div>
                  <div class="metric-comparison">
                    <span class="comparison-text">
                      较行业平均 <span class="lower">低 15%</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="kpi-card enhanced order-metric" @click="showMetricDetail('deliveryRate')">
              <div class="kpi-card-inner">
                <div class="metric-icon-wrapper delivery">
                  <el-icon><CircleCheck /></el-icon>
                </div>
                <div class="metric-content">
                  <div class="metric-name">准时交付率</div>
                  <div class="metric-value-wrapper">
                    <transition name="number-fade" mode="out-in">
                      <span :key="getDeliveryRate()" class="metric-main-value">
                        {{ getDeliveryRate() }}
                      </span>
                    </transition>
                    <span class="metric-unit">%</span>
                  </div>
                  <div class="metric-trend">
                    <span class="trend-badge success">
                      <el-icon><Top /></el-icon> 优秀
                    </span>
                  </div>
                </div>
              </div>
              <div class="metric-sparkline" ref="deliverySparkline"></div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="kpi-card enhanced order-metric" @click="showMetricDetail('orderPriority')">
              <div class="kpi-card-inner">
                <div class="metric-icon-wrapper priority">
                  <el-icon><Warning /></el-icon>
                </div>
                <div class="metric-content">
                  <div class="metric-name">紧急订单</div>
                  <div class="metric-value-wrapper">
                    <transition name="number-fade" mode="out-in">
                      <span :key="getUrgentOrders()" class="metric-main-value">
                        {{ getUrgentOrders() }}
                      </span>
                    </transition>
                    <span class="metric-unit">个</span>
                  </div>
                  <div class="metric-alert">
                    <el-tag type="warning" size="small">需关注</el-tag>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 详细分析图表组 -->
    <div v-if="!loading" class="kpi-group analysis-group">
      <div class="kpi-group-header">
        <div class="header-left">
          <el-icon class="group-icon"><TrendCharts /></el-icon>
          <span class="group-title">订单排程详情</span>
        </div>
      </div>
      <div class="kpi-group-content">
        <div class="analysis-content">
          <el-row :gutter="16">
            <el-col :span="16">
              <div class="chart-card enhanced large">
                <div class="chart-header">
                  <h4>订单完成率趋势</h4>
                  <div class="chart-actions">
                    <el-button type="text" size="small" @click="showFullScreenChart">
                      <el-icon><FullScreen /></el-icon>
                    </el-button>
                  </div>
                </div>
                <div class="chart-body">
                  <div class="main-chart" ref="orderCompletionChart"></div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="chart-card enhanced">
                <div class="chart-header">
                  <h4>订单优先级分布</h4>
                </div>
                <div class="chart-body">
                  <div class="radar-chart" ref="orderPriorityChart"></div>
                  <div class="priority-list">
                    <div class="priority-item urgent">
                      <span class="dot"></span>
                      <span class="label">紧急订单</span>
                      <span class="value">{{ getUrgentOrders() }}个</span>
                    </div>
                    <div class="priority-item normal">
                      <span class="dot"></span>
                      <span class="label">正常订单</span>
                      <span class="value">{{ getNormalOrders() }}个</span>
                    </div>
                    <div class="priority-item low">
                      <span class="dot"></span>
                      <span class="label">低优先级</span>
                      <span class="value">{{ getLowPriorityOrders() }}个</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <!-- 全屏图表对话框 -->
    <el-dialog
      v-model="fullScreenVisible"
      :title="fullScreenTitle"
      width="90%"
      :before-close="closeFullScreen"
      class="fullscreen-chart-dialog"
    >
      <div class="fullscreen-chart-container" ref="fullScreenChart"></div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Tickets,
  Timer,
  CircleCheck,
  Top,
  Warning,
  TrendCharts,
  FullScreen,
  Loading
} from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import { generateKPIData, generateOrderCompletionData } from '@/mock/kpiMockData'
import { planComparisonApi } from '@/api/planComparison'

export default {
  name: 'OrderDimension',
  components: {
    Tickets,
    Timer,
    CircleCheck,
    Top,
    Warning,
    TrendCharts,
    FullScreen,
    Loading
  },
  props: {
    constraintId: {
      type: [String, Number],
      default: null
    }
  },
  emits: ['metric-detail'],
  setup(props, { emit }) {
    // 数据
    const orderData = ref(null)
    const loading = ref(false)
    
    // 图表 refs
    const orderCompletionChart = ref(null)
    const orderPriorityChart = ref(null)
    const deliverySparkline = ref(null)
    const fullScreenChart = ref(null)
    
    // 全屏相关
    const fullScreenVisible = ref(false)
    const fullScreenTitle = ref('订单完成率趋势')
    let fullScreenChartInstance = null
    let orderCompletionChartInstance = null
    let orderPriorityChartInstance = null
    
    // 计算属性
    const getDeliveryRate = () => {
      return Math.floor(Math.random() * 5) + 92
    }
    
    const getUrgentOrders = () => {
      return Math.floor(Math.random() * 5) + 3
    }
    
    const getNormalOrders = () => {
      const total = orderData.value?.planOrderCount || 0
      const urgent = getUrgentOrders()
      const low = getLowPriorityOrders()
      return Math.max(0, total - urgent - low)
    }
    
    const getLowPriorityOrders = () => {
      return Math.floor(Math.random() * 10) + 5
    }
    
    // 加载订单维度数据
    const loadOrderData = async () => {
      if (!props.constraintId) {
        console.warn('约束ID不存在，使用Mock数据')
        orderData.value = generateKPIData()
        await nextTick()
        initCharts()
        return
      }
      
      try {
        loading.value = true
        // TODO: 调用后端接口获取订单维度数据
        // const res = await planComparisonApi.getOrderDimensionData(props.constraintId)
        // if (res && res.success) {
        //   orderData.value = res.data
        // } else {
        //   // 使用Mock数据作为fallback
        //   orderData.value = generateKPIData()
        // }
        
        // 暂时使用Mock数据
        orderData.value = generateKPIData()
        
        await nextTick()
        initCharts()
      } catch (error) {
        console.error('加载订单维度数据失败:', error)
        ElMessage.error('加载订单数据失败')
        // 使用Mock数据作为fallback
        orderData.value = generateKPIData()
        await nextTick()
        initCharts()
      } finally {
        loading.value = false
      }
    }
    
    // 初始化图表
    const initCharts = async () => {
      await nextTick()
      setTimeout(() => {
        initOrderCompletionChart()
        initOrderPriorityChart()
      }, 300)
    }
    
    // 初始化订单完成率图表
    const initOrderCompletionChart = () => {
      if (!orderCompletionChart.value) {
        console.warn('订单完成率图表 DOM 元素不存在')
        return
      }
      
      if (!orderData.value?.orderCompletionData) {
        console.warn('订单完成率图表数据不存在')
        return
      }
      
      try {
        // 如果已存在实例，先销毁
        if (orderCompletionChartInstance) {
          orderCompletionChartInstance.dispose()
        }
        
        orderCompletionChartInstance = echarts.init(orderCompletionChart.value)
        const data = orderData.value.orderCompletionData
        
        orderCompletionChartInstance.resize()
        
        const option = {
          tooltip: {
            trigger: 'axis',
            formatter: function(params) {
              let result = params[0].axisValue + '<br/>'
              params.forEach(item => {
                result += `${item.marker} ${item.seriesName}: ${item.value}%<br/>`
              })
              return result
            }
          },
          legend: {
            data: data.map(item => item.name),
            bottom: 0
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '15%',
            top: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data[0]?.data.map(item => item.date.slice(5)) || [],
            axisLabel: {
              interval: 4,
              fontSize: 11
            }
          },
          yAxis: {
            type: 'value',
            max: 100,
            axisLabel: {
              formatter: '{value}%',
              fontSize: 11
            }
          },
          series: data.map((order, index) => ({
            name: order.name,
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 4,
            data: order.data.map(item => item.value),
            itemStyle: {
              color: getOrderColor(index)
            }
          }))
        }
        
        orderCompletionChartInstance.setOption(option)
        
        // 自适应窗口大小
        const resizeHandler = () => {
          if (orderCompletionChartInstance) {
            orderCompletionChartInstance.resize()
          }
        }
        window.addEventListener('resize', resizeHandler)
        
        console.log('订单完成率图表初始化成功')
      } catch (error) {
        console.error('订单完成率图表初始化错误:', error)
      }
    }
    
    // 初始化订单优先级雷达图
    const initOrderPriorityChart = () => {
      if (!orderPriorityChart.value) {
        console.warn('订单优先级图表 DOM 元素不存在')
        return
      }
      
      if (!orderData.value) {
        console.warn('指标数据不存在，跳过雷达图初始化')
        return
      }
      
      try {
        // 如果已存在实例，先销毁
        if (orderPriorityChartInstance) {
          orderPriorityChartInstance.dispose()
        }
        
        orderPriorityChartInstance = echarts.init(orderPriorityChart.value)
        
        // 获取订单优先级数据
        const urgentOrders = getUrgentOrders()
        const normalOrders = getNormalOrders()
        const lowPriorityOrders = getLowPriorityOrders()
        const totalOrders = orderData.value?.planOrderCount || 0
        
        // 计算百分比（归一化到0-100）
        const maxValue = Math.max(urgentOrders, normalOrders, lowPriorityOrders, totalOrders || 1)
        const normalize = (value) => Math.round((value / maxValue) * 100)
        
        // 雷达图指标维度
        const indicators = [
          { name: '紧急订单', max: 100 },
          { name: '正常订单', max: 100 },
          { name: '低优先级', max: 100 },
          { name: '订单总数', max: 100 },
          { name: '完成率', max: 100 },
          { name: '准时交付', max: 100 }
        ]
        
        // 计算各维度数值
        const deliveryRate = getDeliveryRate()
        const completionRate = Math.floor(Math.random() * 10) + 85
        
        const data = [
          normalize(urgentOrders),
          normalize(normalOrders),
          normalize(lowPriorityOrders),
          normalize(totalOrders),
          completionRate,
          deliveryRate
        ]
        
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: function(params) {
              if (params.seriesType === 'radar' && params.data && params.data.value) {
                let result = '<div style="padding: 8px;">'
                result += '<div style="font-weight: 600; margin-bottom: 8px; color: #714B67;">订单优先级分析</div>'
                const indicatorNames = ['紧急订单', '正常订单', '低优先级', '订单总数', '完成率', '准时交付']
                params.data.value.forEach((value, index) => {
                  const indicatorName = indicatorNames[index] || '未知'
                  result += `<div style="margin: 4px 0;">
                    <span style="display: inline-block; width: 10px; height: 10px; background: #714B67; border-radius: 50%; margin-right: 6px;"></span>
                    ${indicatorName}: <strong style="color: #714B67;">${value}%</strong>
                  </div>`
                })
                result += '</div>'
                return result
              }
              return ''
            }
          },
          radar: {
            indicator: indicators,
            center: ['50%', '55%'],
            radius: '70%',
            name: {
              textStyle: {
                color: '#606266',
                fontSize: 12,
                fontWeight: 500
              }
            },
            splitArea: {
              areaStyle: {
                color: [
                  'rgba(113, 75, 103, 0.05)',
                  'rgba(113, 75, 103, 0.08)',
                  'rgba(113, 75, 103, 0.1)',
                  'rgba(113, 75, 103, 0.12)',
                  'rgba(113, 75, 103, 0.15)'
                ]
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(113, 75, 103, 0.15)',
                width: 1
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(113, 75, 103, 0.2)',
                width: 1
              }
            }
          },
          series: [
            {
              name: '订单优先级分析',
              type: 'radar',
              data: [
                {
                  value: data,
                  name: '优先级分布',
                  itemStyle: {
                    color: '#714B67'
                  },
                  areaStyle: {
                    color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.8, [
                      { offset: 0, color: 'rgba(113, 75, 103, 0.3)' },
                      { offset: 0.5, color: 'rgba(113, 75, 103, 0.2)' },
                      { offset: 1, color: 'rgba(113, 75, 103, 0.05)' }
                    ])
                  },
                  lineStyle: {
                    color: '#714B67',
                    width: 2
                  },
                  symbol: 'circle',
                  symbolSize: 6
                }
              ]
            }
          ]
        }
        
        orderPriorityChartInstance.setOption(option)
        
        // 自适应窗口大小
        const resizeHandler = () => {
          if (orderPriorityChartInstance) {
            orderPriorityChartInstance.resize()
          }
        }
        window.addEventListener('resize', resizeHandler)
        
        console.log('订单优先级雷达图初始化成功')
      } catch (error) {
        console.error('订单优先级雷达图初始化错误:', error)
      }
    }
    
    // 获取订单颜色
    const getOrderColor = (index) => {
      const colors = ['#714B67', '#409EFF', '#67C23A', '#E6A23C', '#F56C6C']
      return colors[index % colors.length]
    }
    
    // 显示指标详情
    const showMetricDetail = (metricType) => {
      emit('metric-detail', metricType)
    }
    
    // 显示全屏图表
    const showFullScreenChart = () => {
      if (!orderCompletionChartInstance) {
        ElMessage.warning('图表未初始化')
        return
      }
      
      fullScreenVisible.value = true
      fullScreenTitle.value = '订单完成率趋势'
      
      nextTick(() => {
        if (!fullScreenChart.value) return
        
        // 获取原图表的配置
        const option = orderCompletionChartInstance.getOption()
        
        // 创建全屏图表实例
        if (fullScreenChartInstance) {
          fullScreenChartInstance.dispose()
        }
        fullScreenChartInstance = echarts.init(fullScreenChart.value)
        fullScreenChartInstance.setOption(option)
        fullScreenChartInstance.resize()
        
        // 监听窗口大小变化
        const resizeHandler = () => {
          if (fullScreenChartInstance) {
            fullScreenChartInstance.resize()
          }
        }
        window.addEventListener('resize', resizeHandler)
      })
    }
    
    // 关闭全屏
    const closeFullScreen = () => {
      if (fullScreenChartInstance) {
        fullScreenChartInstance.dispose()
        fullScreenChartInstance = null
      }
      fullScreenVisible.value = false
    }
    
    // 生命周期
    onMounted(() => {
      loadOrderData()
    })
    
    onUnmounted(() => {
      if (orderCompletionChartInstance) {
        orderCompletionChartInstance.dispose()
      }
      if (orderPriorityChartInstance) {
        orderPriorityChartInstance.dispose()
      }
      if (fullScreenChartInstance) {
        fullScreenChartInstance.dispose()
      }
    })
    
    // 监听 constraintId 变化
    watch(() => props.constraintId, () => {
      loadOrderData()
    })
    
    return {
      orderData,
      loading,
      orderCompletionChart,
      orderPriorityChart,
      deliverySparkline,
      fullScreenChart,
      fullScreenVisible,
      fullScreenTitle,
      getDeliveryRate,
      getUrgentOrders,
      getNormalOrders,
      getLowPriorityOrders,
      showMetricDetail,
      showFullScreenChart,
      closeFullScreen
    }
  }
}
</script>

<style scoped>
.order-dimension {
  width: 100%;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #909399;
}

.loading-state p {
  margin-top: 15px;
  font-size: 14px;
}

.kpi-group {
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
  border-radius: 12px;
  padding: 1.5%;
  margin-bottom: 1.5%;
  border: 1px solid rgba(113, 75, 103, 0.08);
}

.kpi-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5%;
  padding-bottom: 1.2%;
  border-bottom: 1px solid rgba(113, 75, 103, 0.06);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.group-icon {
  font-size: 1.6vw;
  color: #714B67;
}

.group-title {
  font-size: 1.25vw;
  font-weight: 600;
  color: #303133;
}

.metric-count {
  background: rgba(113, 75, 103, 0.08);
  border-color: rgba(113, 75, 103, 0.2);
  color: #714B67;
}

.metric-row {
  margin-bottom: 16px;
}

.kpi-card {
  background: white;
  border-radius: 8px;
  padding: 1.2%;
  border: 1px solid rgba(113, 75, 103, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.kpi-card.enhanced {
  min-height: 11vh;
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
  display: flex;
  flex-direction: column;
}

.kpi-card-inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
}

.metric-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 24px;
}

.metric-icon-wrapper.orders {
  background: rgba(64, 158, 255, 0.1);
  color: #409EFF;
}

.metric-icon-wrapper.hours {
  background: rgba(230, 162, 60, 0.1);
  color: #E6A23C;
}

.metric-icon-wrapper.delivery {
  background: rgba(103, 194, 58, 0.1);
  color: #67C23A;
}

.metric-icon-wrapper.priority {
  background: rgba(230, 162, 60, 0.1);
  color: #E6A23C;
}

.metric-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metric-name {
  font-size: 13px;
  color: #909399;
  font-weight: 500;
}

.metric-value-wrapper {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.metric-main-value {
  font-size: 32px;
  font-weight: 700;
  color: #303133;
  line-height: 1;
}

.metric-unit {
  font-size: 14px;
  color: #909399;
}

.metric-status,
.metric-comparison,
.metric-trend,
.metric-alert {
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-label {
  font-size: 12px;
  color: #909399;
  margin-right: 8px;
}

.comparison-text {
  font-size: 12px;
  color: #909399;
}

.comparison-text .lower {
  color: #67C23A;
}

.trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.trend-badge.success {
  background: rgba(103, 194, 58, 0.1);
  color: #67C23A;
}

.metric-sparkline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  opacity: 0.6;
  z-index: 1;
  pointer-events: none;
}

/* 图表卡片 */
.chart-card {
  background: white;
  border-radius: 8px;
  border: 1px solid rgba(113, 75, 103, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-card.enhanced {
  min-height: 100%;
  height: 100%;
}

.chart-card.enhanced.large {
  min-height: 100%;
  height: 100%;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2% 1.5%;
  border-bottom: 1px solid rgba(113, 75, 103, 0.06);
  background: linear-gradient(135deg, #fafbfc 0%, #f5f7fa 100%);
}

.chart-header h4 {
  margin: 0;
  font-size: 1.1vw;
  font-weight: 600;
  color: #303133;
}

.chart-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chart-body {
  padding: 1.2%;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.main-chart {
  height: 100%;
  width: 100%;
  min-height: 300px;
  position: relative;
}

.radar-chart {
  height: 100%;
  width: 100%;
  min-height: 300px;
  position: relative;
}

.priority-list {
  padding: 1.2% 0 0 0;
  margin-top: 1%;
}

.priority-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
}

.priority-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}

.priority-item.urgent .dot {
  background: #F56C6C;
}

.priority-item.normal .dot {
  background: #409EFF;
}

.priority-item.low .dot {
  background: #909399;
}

.priority-item .label {
  flex: 1;
  color: #606266;
}

.priority-item .value {
  color: #303133;
  font-weight: 600;
}

/* 全屏对话框 */
.fullscreen-chart-dialog :deep(.el-dialog__body) {
  padding: 20px;
  height: calc(90vh - 120px);
}

.fullscreen-chart-container {
  width: 100%;
  height: 100%;
  min-height: 600px;
}

/* 响应式布局 - 适配不同分辨率 */
@media screen and (min-width: 2560px) {
  .main-chart,
  .radar-chart {
    min-height: 320px;
  }
}

@media screen and (max-width: 1920px) {
  .main-chart,
  .radar-chart {
    min-height: 300px;
  }
}

@media screen and (max-width: 1440px) {
  .main-chart,
  .radar-chart {
    min-height: 280px;
  }
}

@media screen and (max-width: 1080px) {
  .main-chart,
  .radar-chart {
    min-height: 260px;
  }
}
</style>

